<template>
    <div class="back_color">
      <el-row>
        <img src="../imgs/wxs.png" class="img-circle">
        <span style="font-size: 18px">维修工单工作台</span>
        <router-link :to="{path:'/tain'}">
          <span class="router_link">进入工单列表</span>
        </router-link>
      </el-row>
      <el-row>
        <el-col :span="11">
          <div class="border_test">
            <div class="position">
              <b>待检测</b> →
              <i style="font-size:13px" class="el-icon-user-solid"></i>
              检测人员
            </div>
          </div>
          <div class="for_each">
            <el-scrollbar style="height: 100%">
              <div v-for="m in mainList">
                <el-row style="margin-left: 22px;margin-top: 20px;margin-bottom: 20px">
                  <el-col :span="5">
                    <span @click="checkMainTain(m.tainOrder)" style="cursor:pointer">{{m.tainOrder}}</span>
                  </el-col>
                  <el-col :span="5">
                    {{m.customerByCustomId.cusName}}
                  </el-col>
                  <el-col :span="10">
                    费用：￥{{m.tainMoney}}.00
                  </el-col>
                  <el-col :span="4" style="color:#a9a9a9">
                    {{m.details[0].tainsDate | formatDate}}
                  </el-col>
                </el-row>
                <hr class="hrt"/>
              </div>
            </el-scrollbar>
          </div>
        </el-col>
        <el-col :span="11" :push="1">
          <div class="border_test">
            <div class="position">
              <b>待确认</b> →
              <i style="font-size:13px" class="el-icon-user-solid"></i>
              接单人员
            </div>
          </div>
          <div class="for_each">
            <el-scrollbar style="height: 100%">
              <div v-for="m in mainThreeList">
                <el-row style="margin-left: 22px;margin-top: 20px;margin-bottom: 20px">
                  <el-col :span="5">
                    <span @click="checkMainTain(m.tainOrder)" style="cursor:pointer">{{m.tainOrder}}</span>
                  </el-col>
                  <el-col :span="5">
                    {{m.customerByCustomId.cusName}}
                  </el-col>
                  <el-col :span="10">
                    费用：￥{{m.tainMoney}}.00
                  </el-col>
                  <el-col :span="4" style="color:#a9a9a9">
                    {{m.details[0].tainsDate | formatDate}}
                  </el-col>
                </el-row>
                <hr class="hrt"/>
              </div>
            </el-scrollbar>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <div class="border_test">
            <div class="position">
              <b>待沟通</b> →
              <i style="font-size:13px" class="el-icon-user-solid"></i>
              接单人员
            </div>
          </div>
          <div class="for_each">
            <el-scrollbar style="height: 100%">
              <div v-for="m in mainSixList">
                <el-row style="margin-left: 22px;margin-top: 20px;margin-bottom: 20px">
                  <el-col :span="5">
                    <span @click="checkMainTain(m.tainOrder)" style="cursor:pointer">{{m.tainOrder}}</span>
                  </el-col>
                  <el-col :span="5">
                    {{m.customerByCustomId.cusName}}
                  </el-col>
                  <el-col :span="10">
                    费用：￥{{m.tainMoney}}.00
                  </el-col>
                  <el-col :span="4" style="color:#a9a9a9">
                    {{m.details[0].tainsDate | formatDate}}
                  </el-col>
                </el-row>
                <hr class="hrt"/>
              </div>
            </el-scrollbar>
          </div>
        </el-col>
        <el-col :span="11" :push="1">
          <div class="border_test">
            <div class="position">
              <b>待维修</b> →
              <i style="font-size:13px" class="el-icon-user-solid"></i>
              维修人员
            </div>
          </div>
          <div class="for_each">
            <el-scrollbar style="height: 100%">
              <div v-for="m in mainFourList">
                <el-row style="margin-left: 22px;margin-top: 20px;margin-bottom: 20px">
                  <el-col :span="5">
                    <span @click="checkMainTain(m.tainOrder)" style="cursor:pointer">{{m.tainOrder}}</span>
                  </el-col>
                  <el-col :span="5">
                    {{m.customerByCustomId.cusName}}
                  </el-col>
                  <el-col :span="10">
                    费用：￥{{m.tainMoney}}.00
                  </el-col>
                  <el-col :span="4" style="color:#a9a9a9">
                    {{m.details[0].tainsDate | formatDate}}
                  </el-col>
                </el-row>
                <hr class="hrt"/>
              </div>
            </el-scrollbar>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <div class="border_test">
            <div class="position">
              <b>维修中</b> →
              <i style="font-size:13px" class="el-icon-user-solid"></i>
              维修人员
            </div>
          </div>
          <div class="for_each">
            <el-scrollbar style="height: 100%">
              <div v-for="m in mainFiveList">
                <el-row style="margin-left: 22px;margin-top: 20px;margin-bottom: 20px">
                  <el-col :span="5">
                    <span @click="checkMainTain(m.tainOrder)" style="cursor:pointer">{{m.tainOrder}}</span>
                  </el-col>
                  <el-col :span="5">
                    {{m.customerByCustomId.cusName}}
                  </el-col>
                  <el-col :span="10">
                    费用：￥{{m.tainMoney}}.00
                  </el-col>
                  <el-col :span="4" style="color:#a9a9a9">
                    {{m.details[0].tainsDate | formatDate}}
                  </el-col>
                </el-row>
                <hr class="hrt"/>
              </div>
            </el-scrollbar>
          </div>
        </el-col>
        <el-col :span="11" :push="1">
          <div class="border_test">
            <div class="position">
              <b>维修完成</b> →
              <i style="font-size:13px" class="el-icon-user-solid"></i>
              接单人员
            </div>
          </div>
          <div class="for_each">
            <el-scrollbar style="height: 100%">
              <div v-for="m in mainSevenList">
                <el-row style="margin-left: 22px;margin-top: 20px;margin-bottom: 20px">
                  <el-col :span="5">
                    <span @click="checkMainTain(m.tainOrder)" style="cursor:pointer">{{m.tainOrder}}</span>
                  </el-col>
                  <el-col :span="5">
                    {{m.customerByCustomId.cusName}}
                  </el-col>
                  <el-col :span="10">
                    费用：￥{{m.tainMoney}}.00
                  </el-col>
                  <el-col :span="4" style="color:#a9a9a9">
                    {{m.details[0].tainsDate | formatDate}}
                  </el-col>
                </el-row>
                <hr class="hrt"/>
              </div>
            </el-scrollbar>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
    export default {
      name: "AsMainConsole",
      data: function () {
        return {
          tainId:'',    //维修id
          mainList: [],
          mainThreeList: [],
          mainFourList: [],
          mainFiveList: [],
          mainSixList: [],
          mainSevenList: []
        }
      },
      created: function () {
        this.$axios.get("http://localhost:8088/crm/tain-two"
        ).then(v => {
          this.mainList = v.data;
        }).catch(v => {
          window.console.log("访问失败!" + v.data);
        })

        this.$axios.get("http://localhost:8088/crm/tain-three"
        ).then(v => {
          this.mainThreeList = v.data;
        }).catch(v => {
          window.console.log("访问失败!" + v.data);
        })

        this.$axios.get("http://localhost:8088/crm/tain-four"
        ).then(v => {
          this.mainFourList = v.data;
        }).catch(v => {
          window.console.log("访问失败!" + v.data);
        })

        this.$axios.get("http://localhost:8088/crm/tain-five"
        ).then(v => {
          this.mainFiveList = v.data;
        }).catch(v => {
          window.console.log("访问失败!" + v.data);
        })

        this.$axios.get("http://localhost:8088/crm/tain-six"
        ).then(v => {
          this.mainSixList = v.data;
        }).catch(v => {
          window.console.log("访问失败!" + v.data);
        })

        this.$axios.get("http://localhost:8088/crm/tain-seven"
        ).then(v => {
          this.mainSevenList = v.data;
        }).catch(v => {
          window.console.log("访问失败!" + v.data);
        })
      },
      methods: {
        checkMainTain(order){
          if(order != null && order != undefined && order != ''){
            this.$axios.get("http://localhost:8088/crm/order-tainid",
              {params:{tainOrder:order}}
            ).then(v => {
              this.tainId = v.data;
              this.$router.push({
                path:'/order',
                query:{
                  tainId:this.tainId
                }
              })
            }).catch(v => {
              alert("访问失败!" + v.data);
            })
          }
        }
      },
      filters: {
        formatDate(time){
          let date = new Date(time)//把定义的时间赋值进来进行下面的转换
          let year = date.getFullYear();
          let month = date.getMonth() + 1;
          let day = date.getDate();
          let hour = date.getHours();
          let minute = date.getMinutes();
          let second = date.getSeconds();
          return year + "-" + month + "-" + day;
          /*return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;*/
        }
      }
    }
</script>

<style scoped>
  .img-circle{
    width: 18px;
    height: 18px;
    margin-top: 7px;
  }
  .router_link{
    color:black;
    margin-left:20px;
    font-size:14px
  }
  .router_link:hover{
    color:#557A9A;
  }
  .border_test{
    background-color: #F4F8FB;
    height:38px;
    font-size:12px;
    margin-top: 20px;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
    -moz-box-shadow: 2px 2px 10px #909090;
    -webkit-box-shadow: 2px 2px 10px #909090;
    box-shadow:2px 2px 10px #909090;
  }
  .position{
    padding-top: 10px;
    padding-left: 20px;
  }
  .for_each{
    width: 100%;
    height: 130px;
    font-size: 12px;
    background-color: white;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
    -moz-box-shadow: 2px 2px 10px #909090;
    -webkit-box-shadow: 2px 2px 10px #909090;
    box-shadow:2px 2px 10px #909090;
  }
  .hrt{
    width: 97%;
    border-top: 1px solid #EEEEEE;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .back_color{
    width: 100%;
    height: 700px;
    background-color: white;
  }
</style>
